﻿
<div class="bui-page">
	<header class="bui-bar">
		<div class="bui-bar-left">
			<a class="bui-btn" onclick="bui.back();"><i class="icon-back"></i></a>
		</div>
		<div class="bui-bar-main">
			TAB选项卡
		</div>
		<div class="bui-bar-right">
		</div>
	</header>
	<main>
		<div id="tabFoot" class="bui-tab">
			<div class="bui-tab-main">
				<ul>
					<li>
                        
                        <div class="container-xy">
                            小提示: 该例子可以在手机中拖动
                        </div>  
						<div class="bui-panel" style="margin-top:0;">
							<div class="bui-panel-head">示例:</div>
							<div class="bui-panel-main">
								<div class="container">
									<h4>html:</h4>
                        <xmp>
<div id="tabNews" class="bui-tab">
  <div class="bui-tab-main">
    <ul>
      <li>
        滑动的内容
      </li>
      <li>
        滑动的内容
      </li>
    </ul>
  </div>
</div>

<!-- 菜单在外层 要用id -->
<ul id="tabNav" class="bui-nav">
  <li class="bui-btn active">
  TAB1
  </li>
  <li class="bui-btn">
  TAB2
  </li>
</ul>
                                    </xmp>
                                    <h4>js:</h4>
                                    <xmp>
var tab = bui.slide({
    id:"#tabNews",
    menu:"#tabNav",
    children:".bui-tab-main > ul",
    scroll: true
    
})      
                                    </xmp>  
									
								</div>
							</div>
						</div>
					</li>
					<li>
						新闻tab
					</li>
					<li>
						图片tab
					</li>
					<li>
						设置tab
					</li>
				</ul>
		
			</div>
		</div>
		
	</main>

	<footer>
		<ul id="tabFootNav" class="bui-nav">
			<li class="bui-btn bui-box-vertical active"><i class="icon-home"><span class="bui-badges">15</span></i><div class="span1">首页</div></li>
			<li class="bui-btn bui-box-vertical"><i class="icon-share"></i><div class="span1">新闻</div></li>
			<li class="bui-btn bui-box-vertical"><i class="icon-pic"><span class="bui-badges"></span></i><div class="span1">图片</div></li>
			<li class="bui-btn bui-box-vertical"><i class="icon-setting"></i><div class="span1">设置</div></li>
		</ul>
	</footer>
</div>
